<template>
	<view class="bind-phone">
		<input placeholder="请输入手机号码" type="number" v-model="form.phone" maxlength="11" />
		<view class="app-phone-login-cell">
			<input placeholder="请输入验证码" type="number" v-model="form.code" maxlength="6" />
			<text class="get-code" @click="getCode" v-if="!isSend">获取验证码</text>
			<text class="get-code isSend" v-else>{{count}}S后重新发送</text>
		</view>
		<view class="bind-phone-btn" @click="bindPhone">立即注册</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSend: false,
				count: 60,
				form: {
					type: 1,
					phone: '',
					code: ''
				}
			};
		},
		methods: {
			getCode(){
				let phoneRexp = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[0-9])\d{8}$/;
				if(!this.form.phone){
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none',
						duration: 2000
					});
					return false;
				}else if(!phoneRexp.test(this.form.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none',
						duration: 2000
					});
					return false;
				}else{
					this.send()
				}
			},
			countDown() {
				var time = setInterval(() => {
					this.count--
					if (this.count < 1) {
						clearInterval(time)
						this.count = 60
						this.isSend = false
					}
				}, 1000)
			},
			send() {
				let data = {
					phone: this.form.phone,
					login_code: 'login'
				}
				this.$u.apiWei.PhoneGetCode(data).then(res => {
					this.isSend = true
					uni.showToast({
						icon: 'none',
						title: '发送成功',
						duration: 1500
					})
					this.countDown()
				})
			},
			bindPhone() {
				if(!this.form.phone){
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return false
				}else if(!this.form.code){
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return false
				}
				this.$u.api.NewAppBinding(this.form).then(res => {
					uni.setStorageSync('userInfo',JSON.stringify(res.datas))
					if(res.datas.nickname==='0' && res.datas.heard_img==='0'){
						uni.showModal({
							title: '请点击确定授权',
							showCancel: false,
							success: (confirm) => {
								if(confirm.confirm){
									this.wechatLogin()
								}
							}
						})
						return false
					}
					uni.showToast({
						icon: 'none',
						title: '绑定成功',
						duration: 1500
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					},1500)
				})
			},
			wechatLogin(){
				let _this = this
				let weixinService = null;
				plus.oauth.getServices((services) => {
					services.forEach(item => {
						if(item.id==='weixin'){
							weixinService = item
						}
					})
					if(!weixinService) {
						uni.showToast({
							icon: 'none',
							title: '没有微信登录授权服务'
						})
						return;
					}
					weixinService.authorize((e) => {
						_this.$u.api.NewAppBinding({
							code: e.code,
							phone: JSON.parse(uni.getStorageSync('userInfo')).phone,
							type: 2,
						}).then(res => {
							console.log(res,'bind')
							uni.setStorageSync('userInfo',JSON.stringify(res.datas))
							uni.showToast({
								icon: 'none',
								title: '绑定成功',
								duration: 1500
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							},1500)
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.bind-phone{
		padding-top: 55rpx;
		border-top: solid 2rpx #EEE;
		input{
			border: solid 2rpx #EEE;
			padding: 30rpx;
			margin: 0 55rpx;
			border-radius: 6pt;
		}
		.app-phone-login-cell{
			border: solid 2rpx #EEE;
			display: flex;
			align-items: center;
			margin: 55rpx 55rpx 0;
			border-radius: 6pt;
			input{
				flex: 1;
				min-width: 0;
				height: 40rpx;
				line-height: 40rpx;
				border: none;
				margin: 0 30rpx;
				padding: 30rpx 0;
			}
			.get-code{
				font-size: 32rpx;
				color: #141414;
				font-weight: bold;
				margin-right: 30rpx;
				&.isSend{
					color: #999;
				}
			}
		}
		.bind-phone-btn{
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			margin: 55rpx 55rpx 0;
			background-color: #141414;
			color: #FFF;
			border-radius: 6pt;
			font-size: 36rpx;
		}
	}
</style>
